<template>
  <ContentContainer
    :show-pagination="false"
    :show-footer="false"
    :refresh="false">
    <div class="weight-label">压缩配置</div>
    <div class="sub-label mb-6">
      节点对资源进行压缩，减小传输文件大小，提升请求资源的加载速度。
    </div>
    <div class="normal-label">Brotli 压缩</div>
    <a-checkbox-group v-model="form.brotli">
      <a-checkbox
        v-for="item in compressOptions"
        :key="item.value"
        :value="item.value"
        class="!h-22px"
        >{{ item.label }}</a-checkbox
      >
    </a-checkbox-group>
    <div class="normal-label mt-6">Gzip 压缩</div>
    <a-checkbox-group v-model="form.gzip">
      <a-checkbox
        v-for="item in compressOptions"
        :key="item.value"
        :value="item.value"
        class="!h-22px"
        >{{ item.label }}</a-checkbox
      >
    </a-checkbox-group>
    <div class="flex flex-col sub-label my-6">
      <span>注意：</span>
      <span>
        1. 源站开启了压缩功能，且服务端响应中携带了响应头 Content-Encoding，则
        CDN 的压缩功能将不再生效。
      </span>
      <span>
        2. 同时开启 Gzip 压缩和 Brotli 压缩，且客户端请求头 Accept-Encoding
        同时携带 br 和 gzip 时：
      </span>
      <ul class="my-0 pl-8">
        <li>
          若 CDN 节点同时有 br 和 gzip 压缩的缓存内容，则优先响应 Brotli 压缩；
        </li>
        <li>若 CDN 节点仅有 br 压缩的缓存内容，则优先响应 Brotli 压缩；</li>
        <li>若 CDN 节点仅有 gzip 压缩的缓存内容，则优先响应 Gzip 压缩。</li>
      </ul>
      <span>
        3. 源站文件自身有 MD5 值校验机制，开启压缩可能会影响站点的功能。
      </span>
      <span>
        4. 当源站文件的大小在 1 KB 以上时，才可以使用压缩，1 KB
        以下的文件不做压缩。
      </span>
    </div>
    <a-button
      type="primary"
      class="mb-6"
      :loading="saveLoading"
      @click="handleSave"
      >保存配置</a-button
    >
  </ContentContainer>
</template>
<script lang="ts" setup>
import {
  getApiSiteCompressionApi,
  updateApiSiteCompressionApi
} from '@/apis/modules/site/site'
import { cloneDeep } from 'lodash-es'
const route = useRoute()
const form = reactive({
  brotli: [],
  gzip: []
})

const id = computed(() => route.params.id as string)

// 压缩配置
const { request: compressRequest } = useRequest(getApiSiteCompressionApi, {
  auto: true,
  params: { id: id.value },
  success: (res) => {
    Object.assign(form, res)
  }
})
const saveLoading = ref(false)
const handleSave = async () => {
  saveLoading.value = true
  const data = cloneDeep({
    site_compression: {
      brotli: form.brotli,
      gzip: form.gzip
    },
    id: id.value
  })
  await updateApiSiteCompressionApi({ ...data }).finally(
    () => (saveLoading.value = false)
  )
  ToastUtils.success('操作成功')
}
watchEffect(() => {
  compressRequest({ id: id.value })
})
</script>

<style lang="less" scoped>
:deep(.arco-select-view-single) {
  .arco-select-view-suffix {
    padding-left: 4px;
  }
}
.weight-label {
  @apply text-sm/22px font-700 text-1;
}
.normal-label {
  @apply text-sm/22px text-2 mb-2;
}
.sub-label {
  @apply text-xs/5 text-5;
}
.label-col-no-margin {
  :deep(.arco-form-item-label-col) {
    @apply mb-0;
  }
}
</style>
